<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据报表标注</title>
    <meta name="renderer" content="webkit">
    <base href="<?php echo base_url(); ?>"/>
    <!--    <link rel="stylesheet" href="public/css/bootstrap.min.css">-->
    <link rel="stylesheet" href="public/js/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="public/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="public/css/common.css"/>
    <link rel="stylesheet" href="public/css/dcalendar.picker.css">
    <link rel="stylesheet" type="text/css" href="public/css/index.css"/>
    <link type="text/css" rel="stylesheet" href="public/css/owl.carousel.css">
    <link type="text/css" rel="stylesheet" href="public/css/owl.theme.css">
    <link rel="stylesheet" href="public/css/cqs.style.css">
    <style>

        .month {
            word-break: keep-all;
        }

        #mydatepicker {
            cursor: pointer !important;
            padding: 7px 10px;
        }

        table td {
            padding: 0px;
        }

        .box1-tit-wrapper {
            width: auto;
            height: 33px;
        }

        .scroll .txt-btm {
            width: auto;
        }

        #mydatepicker::-ms-clear {
            display: none;
        }

        .date-box input {
            height: auto;
        }

        .i-char-hint2 {

        }

        .no-items {
            width: 100%;
            overflow: hidden;
            background-color: #ffffff;
            padding-top: 60px;
        }
    </style>
</head>
<body style="background-color: #f4f4f4;">
<?php $this->load->view('common/header.php'); ?>
<div class="cqs-main" style="background-color: #f4f4f4;">
    <div class="cqs-main_top cqs-mgt30">数据报表：成本中心
        <button class="cqs-output" style="float: right; margin-right: 20px;margin-top:19px;cursor: pointer">导出报表
        </button>
    </div>
    <table id="table" style="display: none">
        <tr>
            <td colspan="6" style="text-align: center">数据报表-成本中心</td>
        </tr>
        <tr>
            <th>序号</th>
            <th>成本中心</th>
            <th>订单数</th>
            <th>销售商品数</th>
            <th>销售额</th>
            <th>月份</th>
        </tr>
        <?php if (count($table_data)): ?>
            <?php foreach ($table_data as $i => $v): ?>
                <tr>
                    <td><?= $i + 1 ?></td>
                    <td><?= $v['name'] ?></td>
                    <td><?= $v['orders'] ?></td>
                    <td><?= $v['num'] ?></td>
                    <td><?= $v['price'] ?></td>
                    <td class="tableexport-string target"><?= $v['month'] ?></td>
                </tr>
            <?php endforeach; ?>
        <?php endif; ?>
    </table>
    <div class="cqs-main_con">
        <div class="cqs-main_left cqs-moth-number">
            <div class="cqs-title">月采购量
                <div class="date-box cqs-year">
      <span class="date-group">
          <input id='mydatepicker' style="width: 120px;" value="<?php echo $current_month; ?>"
                 placeholder="<?php echo $current_month; ?>" type='text' data-maxdate="today"/>

        <img src="public/img/btn_arrow_down_h.png" alt=""></span>
                </div>
            </div>
            <?php if (strlen($data1) > 10): ?>
                <div id="chart" class="myChart"></div>
                <div class="i-char-hint3">您的浏览器由于版本过低不支持图标展示，请升级！</div>
                <div class="i-char-hint2">
                    <?php if (count($data1_desc)): ?>
                        <?php $i = 0;foreach ($data1_desc as $k => $v): ?>
                            <?php $i++?>
                            <p>
                                <span class="<?= $v ?>">icon</span> TOP<?= $i ?> <?= $k ?>
                            </p>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            <?php else: ?>
                <div id="no-data-div">
                    <div style="color:#5c606b;font-size: 16px;text-align: center;padding: 20px;">
                        成本中心(总额) <?php echo $current_month; ?>：￥<?php echo $month_total; ?></div>
                    <div class="myChart2" style="margin: 0px auto;text-align: center"><img src="public/img/empty.png"
                                                                                           alt="">
                    </div>
                </div>
                <!--[if lt  IE 9]>
                <div id="chart" class="myChart"></div>
                <div class="i-char-hint3">您的浏览器由于版本过低不支持图标展示，请升级！</div>
                <![endif]-->
            <?php endif; ?>
        </div>
        <div class="cqs-main_right cqs-year-number">
            <div class="cqs-title">年采购量
                <div class="date-box cqs-year">
                    <select class="form-control" id="select_center" style="cursor: pointer">
                        <?php foreach ($lists as $k => $v) { ?>
                            <option <?php if ($k == $center): ?>selected<?php endif; ?>
                                    value="<?= $k; ?>"><?= $v; ?></option>
                        <?php } ?>
                    </select>
                </div>
            </div>

            <div style="margin-left: 25px;" id="myChart" class="myChart"></div>

        </div>
    </div>
    <div class="index-box index-box2 box-shadow" style="margin-top:15px;">
        <div class="box1-tit-wrapper">
            <span class="tit index-box2-tit">成本中心采购单品数Top5</span>
            <a href="<?php echo base_url('information/information_purchase_goods'); ?>" class="get-more">查看更多> </a>
        </div>
        <div class="pro-top10">
            <div class="scroll-outer">
                <?php if (count($top5)): ?>
                    <div id="scroll" class="owl-carousel scroll">
                        <?php foreach ($top5 as $v): ?>
                            <div class="item">
                                <img src="<?php echo $v['goods_main_img']; ?>" alt="<?= $v['goods_name'] ?>">
                                <div class="shd"><a target="_blank"
                                                    href="<?php echo base_url(); ?>goods/detail?id=<?php echo $v['goods_id']; ?>"></a>
                                </div>
                                <div class="txt">
                                    <p class="price"><em>￥</em><?= $v['goods_price'] ?></p>
                                    <a target="_blank"
                                       href="<?php echo base_url(); ?>goods/detail?id=<?php echo $v['goods_id']; ?>"
                                       class="intro"><?= $v['goods_name'] ?></a>
                                    <a target="_blank" href="<?php echo base_url('office'); ?>"
                                       class="link-wjyh">文具1号超市</a>
                                    <p class="txt-btm">
                                        <span class="appraise">累计购买：<?= $v['num'] ?>件</span>
                                    </p>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php else: ?>
                    <div class="no-items">
                        <span class="icon-img_empty bg-img_empty"></span>
                        <p class="text">
                            当前暂无采购商品
                            <span class="span02"></span>
                        </p>
                        <p class="text02"></p>
                        <a href="<?php echo base_url('office'); ?>" class="link-home">先去文具1号商城逛逛＞</a>
                    </div>
                <?php endif ?>

            </div>

        </div>
    </div>
</div>

<script>

    var ie = (function () {

        var undef,
            v = 3,
            div = document.createElement('div'),
            all = div.getElementsByTagName('i');

        while (
            div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
                all[0]
            ) ;

        return v > 4 ? v : undef;

    }());
    if ((typeof(ie) == 'undefined') == true) {
    } else {
        if (ie != 9) {
            $("#no-data-div").hide();
        }
    }
</script>

<?php $this->load->view('common/bottom.php'); ?>

<script src="public/js/jquery.min.js"></script>
<script src="public/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="public/js/jquery.query-object.js" charset="utf-8"></script>
<script src="public/js/dcalendar.picker.center.js"></script>
<script src="public/js/ichart.1.2.min.js"></script>
<script type="text/javascript" src="public/js/owl.carousel.min.js"></script>

<script type="text/javascript" src="public/js/xlsx.core.min.js"></script>
<script type="text/javascript" src="public/js/FileSaver.js"></script>
<script type="text/javascript" src="public/js/jquery.table2excel.js"></script>

<script>
    if ((typeof(ie) == 'undefined') == true) {
        var DefaultTable = document.getElementById('table');
        var table = new TableExport(DefaultTable, {
            headers: true,                              // (Boolean), display table headers (th or td elements) in the <thead>, (default: true)
            footers: true,                              // (Boolean), display table footers (th or td elements) in the <tfoot>, (default: false)
            formats: ['xlsx'],                          // (String[]), filetype(s) for the export, (default: ['xlsx', 'csv', 'txt'])
            filename: '数据统计-成本中心',                             // (id, String), filename for the downloaded file, (default: 'id')
            bootstrap: false,                           // (Boolean), style buttons using bootstrap, (default: false)
            exportButtons: true,
            position: 'bottom',                         // (top, bottom), position of the caption element relative to table, (default: 'bottom')
            ignoreRows: null,                           // (Number, Number[]), row indices to exclude from the exported file(s) (default: null)
            ignoreCols: null,                           // (Number, Number[]), column indices to exclude from the exported file(s) (default: null)
            ignoreCSS: '.tableexport-ignore',           // (selector, selector[]), selector(s) to exclude cells from the exported file(s) (default: '.tableexport-ignore')
            emptyCSS: '.tableexport-empty',             // (selector, selector[]), selector(s) to replace cells with an empty string in the exported file(s) (default: '.tableexport-empty')
            trimWhitespace: false                        // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s) (default: true)
        });
        $('.button-default').hide();
        $('.cqs-output').on('click', function () {
            $('.button-default').trigger('click')
        })
    } else {
        $('.cqs-output').on('click', function () {
            layer.alert('浏览器版本过低，请更新您的浏览器或使用其他浏览器导出报表');
        })
    }


</script>


<script>
    $(function () {
        var data = [
            {
                name: '北京',
                value: <?php echo $moneys; ?>,
                //value: [200, 2000, 1500, 2500, 2600, 3000, 3200, 2900, 2200, 1200, 1000, 5500],
                color: '#c40000',
                line_width: 2
            }
        ];
        var chart = new iChart.LineBasic2D({
            render: 'myChart',
            data: data,
            title: '<?php echo $current_center;?>',
            width: 580,
            height: 350,
            tip: {
                enable: true,
                shadow: false,
                listeners: {
                    //tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引
                    parseText: function (tip, name, value, text, i) {
                        return "<span style='background-color#2b2d2e;font-size:20px;'>¥" + value + "</span>";
                    }
                }
            },
            // offsetx: 80,
            // offsety: 50,
            crosshair: {
                enable: true,
                line_color: '#ec4646'
            },
            coordinate: {height: '90%', background_color: '#ffffff', striped: true},
            sub_option: {
                hollow_inside: true,//设置一个点的亮色在外环的效果
                point_size: 10,
                smooth: true,
                label: false
            },
            align: 'center',
            border: 0,
            label: {
                color: '#2b2d2e'
            },
            labels: <?php echo $labels;?>
            //labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
        });

        chart.draw();
    });
</script>

<?php if (strlen($data1) > 10): ?>
    <script type="text/javascript">
        $(function () {
            // var data = [
            //     {name: 'Top1\n\r总部-销售部\n\r￥9000.00', value: 9000.00, color: '#eecb58'},
            //     {name: 'Top2\n\r总部-产品部\n\r￥3000.00', value: 3000.00, color: '#4c80a7'},
            //     {name: 'Top3\n\r总部-技术部\n\r￥2000.00', value: 2000.00, color: '#69b2e7'},
            //     {name: '', value: 1000.00, color: '#e85b3f'},
            //     {name: '', value: 500.00, color: '#f9a825'}
            // ];

            var data = <?php echo $data1; ?>


            var chart = new iChart.Pie2D({
                render: 'chart',
                data: data,
                title: {
                    text: '成本中心(总额)<?php echo $current_month; ?>：￥<?php echo $month_total; ?>',
                    color: '#5c606b',
                    fontsize: '16px'
                },
                sub_option: {
                    label: {
                        background_color: null,
                        sign: false,//设置禁用label的小图标
                        padding: '0 4',
                        border: {
                            enable: false,
                            color: '#666666'
                        },
                        fontsize: 14,
                        fontweight: 600,
                        color: '#2b2d2e'
                    },
                    border: {
                        width: 2,
                        color: '#ffffff'
                    }
                },
                shadow: true,
                shadow_blur: 6,
                shadow_color: '#aaaaaa',
                shadow_offsetx: 0,
                shadow_offsety: 0,
                background_color: '#fefefe',
                legend: {
                    enable: false,
                    align: 'center',
                    valign: 'bottom'
                },
                valign: top,
                offsetx: 0,//设置向x轴负方向偏移位置60px
                offset_angle: -120,//逆时针偏移120度
                showpercent: false, // 显示百分比
                decimalsnum: 2,
                width: 540,
                height: 300,
                radius: 120,
                border: 0
            });
            //利用自定义组件构造右侧说明文本
            chart.plugin(new iChart.Custom({
                drawFn: function () {
                    //计算位置
                    var y = chart.get('originy'),
                        w = chart.get('width');

                    //在右侧的位置，渲染说明文字
                    //   chart.target.textAlign('start')
                    //     .textBaseline('middle')
                    //     .textFont('600 16px Verdana')
                    //     .fillText('UC浏览器、\n手机QQ浏览器及\n欧朋浏览器的份额\n位列第三方手机浏览器\n市场前三甲',w-220,y-40,false,'#be5985',false,20);
                }
            }));

            chart.draw();
        });
    </script>
<?php endif; ?>
<script type="text/javascript">
    $('#mydatepicker').dcalendarpicker({
        format: 'yyyy-mm',
        // defaultDate: '1',
        // changeYear: true,
        // viewMode: 'months'
    }).on('dateselected', function (e) {
        window.location.search = jQuery.query.set("month", e.date);
    });

    $("#select_center").on('change', function () {
        window.location.search = jQuery.query.set("center", $(this).val());
    })
    // $('#scroll').owlCarousel({
    //     items: 5,
    //     autoPlay: false,
    //     navigation: true,
    //     navigationText: ["", ""],
    //     scrollPerPage: true
    // });

</script>

<?php if (count($top5)): ?>
    <script type="text/javascript">
        $('#scroll').owlCarousel({
            items: 5,
            autoPlay: false,
            navigation: true,
            navigationText: ["", ""],
            scrollPerPage: true
        });
    </script>
<?php endif; ?>


</body>
</html>